<template>
  <el-form :model="model" label-width="100px" :rules="rules" ref="form">
    <el-form-item label="名称" prop="areaName" required>
      <el-input v-model="model.areaName" />
    </el-form-item>
    <el-form-item label="备注" prop="remake" required>
      <el-input v-model="model.remake" />
    </el-form-item>
    <div class="divider">
      样式设置
    </div>
    <!-- <el-form-item label="线条" prop="line">
          <el-color-picker v-model="model.line" />
        </el-form-item> -->
    <el-form-item label="颜色" prop="color">
      <el-color-picker v-model="model.color" />
    </el-form-item>
    <el-form-item label="线宽" prop="lineWidth">
      <el-input v-model.trim.number="model.lineWidth" maxlength="2" placeholder="线宽" />
    </el-form-item>
    <el-form-item>
      <el-button @click="onDelete" type="info">删除</el-button>
      <el-button @click="onSave" type="primary">确认</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: 'arrow-form',
  data() {
    return {
      model: {
        areaName: '',
        remake: '',
        // line: '#ff0000',
        color: '#ff0000',
        lineWidth: 2,
      },
      rules: {
        areaName: [
          {
            required: true,
            message: '名称不能为空',
          },
        ],
        remake: [
          {
            required: true,
            message: '备注不能为空',
          },
        ],
      }
    };
  },
  methods: {
    onSave() {
      this.$refs.form.validate(async (isValid) => {
        if (isValid) {
          this.$emit('save', {
            ...this.model,
            type: 3,
          });
        }
      })
    },
    onDelete() {
      this.$emit('delete');
    },
    update(data) {
      this.model.areaName = data.areaName;
      this.model.remake = data.remake;
      this.model.color = data.color;
      this.model.lineWidth = data.lineWidth;
    },
  },
  mounted() {
    this.update(this.dataSource);
  },
  watch: {
    dataSource(val) {
      this.update(val);
    }
  },
  props: {
    dataSource: {
      type: Object,
      default: () => ({
        areaName: '',
        remake: '',
        color: '#ff0000',
        lineWidth: 2,
      }),
    },
  },
}

</script>
<style lang="scss" scoped>
.divider {
  height: 32px;
  background: rgba(98,183,255,0.2);
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  line-height: 32px;
  box-sizing: border-box;
  margin-bottom: 1.14583vw;
  &:before {
    content: "";
    width: 2px;
    height: 100%;
    display: inline-block;
    background: #62B7FF;
    vertical-align: top;
    margin-right: 12px;
  }
}
</style>